<!--
 * @Description: 通用审批信息(现在修改为可以支持自定义审批详情，且能APP调用，需要传入审批信息自定义索引index，否则为通用审批信息保持之前不变)
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-09-02 18:15:51
 * @LastEditTime: 2023-01-05 15:03:52
 * @FilePath: \cscec-pms-admin\src\views\appApproval\index.vue
-->
<template>
    <a-tabs
      v-if="index < 0"
      v-model="key"
      type="card"
      style="margin:20px 5px"
    >
      <a-tab-pane
        key="1"
        tab="当前流程"
      >
        <img
          style="width: 100%"
          :src="flowChart"
        >
        <s-table
          ref="ApprovetableCurrent"
          bordered
          size="default"
          row-key="key"
          :columns="columnApproveCurrent"
          :data="loadDataCurrent"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :show-pagination="false"
        >
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
          <template
            slot="opinions"
            slot-scope="text"
          >
            <ellipsis
              :length="30"
              tooltip
            >
              {{ text }}
            </ellipsis>
          </template>
          <template
            slot="userName"
            slot-scope="text"
          >
            <ellipsis
              :length="50"
              tooltip
              placement="right"
            >
              {{ text }}
            </ellipsis>
          </template>
        </s-table>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="历史流程"
      >
        <s-table
          ref="Approvetable"
          bordered
          size="default"
          row-key="key"
          :columns="columnApprove"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :show-pagination="true"
          @expand="expand"
        >
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
          <template
            slot="formData.opinions"
            slot-scope="text"
          >
            <ellipsis
              :length="30"
              tooltip
            >
              {{ text }}
            </ellipsis>
          </template>
          <a-spin
            slot="expandedRowRender"
            slot-scope="record"
            :spinning="record.spinning"
            style="margin: 0"
          >
            <a-table
              bordered
              row-key="id"
              :columns="columnApproveDetail"
              :data-source="record.description"
              :pagination="false"
            />
          </a-spin>
        </s-table>
      </a-tab-pane>
    </a-tabs>
    <component
      v-else
      :is="indexKey[index]"
      :visible="visible"
      :businessId="businessId"
    />
</template>

<script>
import { getProcessNodeList, getProcInstByBusiness, getFlowChart } from '@/api/process'
import { getOrgEmployeesListBy } from '@/api/commons'
import { STable } from '@/components'
import { Ellipsis } from '@/components'
import JosnBig from 'json-bigint'
import { getCurrentProcessList } from '@/utils/requestWithParams.js'
import { columnApproveCurrent, columnApprove, columnApproveDetail, indexKey,components } from './model.js'

export default {
  components: {
    STable,
    Ellipsis,
    ...components
  },
  props: {
    // title: {
    //   type: String,
    //   default: '审批详情'
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // businessId: {
    //   type: String,
    //   default: '862142871451602944'
    // }
  },
  data() {
    this.columnApprove = columnApprove
    this.columnApproveCurrent = columnApproveCurrent
    this.columnApproveDetail = columnApproveDetail
    return {
      // 自定义审批信息索引
      index: -1,
      // 组件索引key
      indexKey,
      visible: false,
      approveInfos: [],
      spinning: false,
      key: '1',
      flowChart: '',
      loadDataCurrent: () => {
        return getCurrentProcessList.call(this, { businessId: this.businessId })
      },
      loadData: parameter => {
        parameter.businessId = this.businessId
        return getProcInstByBusiness(parameter).then(res => {
          const data = res.data
          const userIds = []
          data.forEach(item => {
            item.spinning = false
            userIds.push(item.startUser)
            item.endTime = item.endTime || '进行中'
            item.durationTime = item.durationTime || '进行中'
            item.description = []
          })
          // console.log(userIds)
          if(userIds?.length) {
            return getOrgEmployeesListBy({ userIds, delete: true }).then(employees => {
              this.flowRequesting = false
              res.data.forEach(r => {
                employees.data.some(e => {
                  if (e.userId === r.startUser) {
                    r.userName = e.name
                    return true
                  }
                })
              })
              console.log('数据返回对象：', res)
              return res
            })
          }
        })
      }
    }
  },
  created() {
    const { businessId, index} = this.$route.query
    this.businessId = businessId
    // 自定义审批信息且带上审批信息索引(APP端调用可以传入自定义索引)
    this.index = parseInt(index)
    if(this.index < 0){
      this.getFlowChart()
    }
  },
  mounted(){
    if(this.index >= 0){
      this.$nextTick(()=>{
        const timer = setTimeout(()=>{
          // app调用时手动触发组件watch的visible(不修改原有逻辑的情况下触发查询及清除表格数据)
          this.visible = true
          clearTimeout(timer)
        },100)
      })
    }
  },
  methods: {
    handleClose() {
      this.$emit('confirm')
    },
    getFlowChart() {
      this.spinning = true
      getFlowChart(this.businessId)
        .then(res => {
          this.spinning = false
          if (res.code === 200) {
            this.flowChart = 'data:image/png;base64,' + res.data
          }
        })
        .catch(() => {
          this.spinning = false
        })
    },
    expand(expanded, record) {
      if (expanded) {
        this.getProcessNodes(record.procInstId, record)
      }
    },
    getProcessNodes(e, record) {
      // console.log(record)
      record.spinning = true
      getProcessNodeList({ procInstId: e, pageNo: 1, pageSize: 100 })
        .then(res => {
          if (res.code === 200) {
            const data = res.data
            const userIds = data.map(d => {
              if (d.formData) {
                d.formData = JosnBig.parse(d.formData)
              }
              return d.assignee
            })
            // console.log(userIds)
            userIds?.length && getOrgEmployeesListBy({ userIds, delete: true })
              .then(employees => {
                record.spinning = false
                res.data.forEach(r => {
                  employees.data.some(e => {
                    if (e.userId === r.assignee) {
                      r.userName = e.name
                      return true
                    }
                  })
                })

                this.$refs.Approvetable.localDataSource.forEach(i => {
                  if (i.procInstId == e) {
                    data.forEach(item => {
                      item.auditResult =
                        item.formData.reject === 'true'
                          ? '审批不通过'
                          : item.formData.reject === 'false'
                          ? '审批通过'
                          : ''
                    })
                    i.description = data
                  }
                })
              })
              .catch(e => {
                console.log(e)
                record.spinning = false
              })
          }
        })
        .catch(() => {
          console.log(e)
          record.spinning = false
        })
    }
  },
  watch: {
    // visible(v) {
    //   if (v) {
    //     this.$nextTick(() => {
    //       this.key = '1'
    //       this.getFlowChart()
    //       if (this.$refs.Approvetable) {
    //         this.$refs.Approvetable.refresh()
    //       }
    //       if (this.$refs.ApprovetableCurrent) {
    //         this.$refs.ApprovetableCurrent.refresh()
    //       }
    //     })
    //   } else {
    //     this.flowChart = ''
    //     if (this.$refs.Approvetable) {
    //       this.$refs.Approvetable.localDataSource = []
    //     }
    //     if (this.$refs.ApprovetableCurrent) {
    //       this.$refs.ApprovetableCurrent.localDataSource = []
    //     }
    //   }
    // }
  }
}
</script>

<style>
.approval-dialog {
  position: relative;
  z-index: 9999999999;
}
</style>
